<template>
	<view class="">
		<u-popup v-model="showBeautifulNumber" mode="center" border-radius="12" width="680">
			<view class="beautiful_box">
				<view class="beautiful_title">
					{{ beautifulNumNew }}
				</view>
				<view class="beautiful_btn_box">
					<view class="beautiful_btn_copy" @click="handleCopyUrl(beautifulNumNew)">
						复制推广链接
					</view>
					<view class="beautiful_btn_go" @click="handleGoUrl(beautifulNumNew)">
						跳转推广链接
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['beautifulNum'],
		data() {
			return {
				showBeautifulNumber: false,
				beautifulNumNew: ''
			}
		},
		watch: {
			beautifulNum: {
				handler(newVal) {
					this.beautifulNumNew = newVal
				}
			}
		},
		methods: {
			// 复制链接
			handleCopyUrl(val) {
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			},

			// 跳转链接
			handleGoUrl(val) {
				uni.navigateTo({
					url: '/pages/index/webview/webview?url=' + val
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.beautiful_box {
		padding: 40rpx 30rpx;

		.beautiful_title {
			font-family: button-font;
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
			word-break: break-all;
			padding-bottom: 40rpx;
		}

		.beautiful_btn_box {
			display: flex;

			.beautiful_btn_copy {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 333rpx;
				height: 79rpx;
				background: #FFFFFF;
				border-radius: 14rpx 0px 0px 14rpx;
				border: 1px solid #0E255B;
				font-family: button-font;
				font-weight: 500;
				font-size: 30rpx;
				color: #0E255B;
			}

			.beautiful_btn_go {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 333rpx;
				height: 79rpx;
				background: #0E255B;
				border-radius: 0px 14rpx 14rpx 0px;
				font-family: button-font;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFD79A;
			}
		}
	}
</style>